<script setup>
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { showToast } from "vant";
import "./newtrends.css";
const list = ref([]);
const getList = async () => {
  const res = await axios.get("http://8.130.46.189:3000/ljb/trend");
  list.value = res.data.data;
};

onMounted(() => {
  getList();
});
</script>
<template>
  <div className="newtrends-all">
    <div class="newtrends-content" v-for="item in list" :key="item.id">
      <img src="../../../imgs/trends1.png" class="newtrends-img" />

      <div className="newtrends-content-wenan">
        <span>{{ item.title }}</span>
      </div>

      <div class="newtrends-content-toxiang">
        <img :src="item.profileImage" class="newtrends-toxiang" />
        <span>{{ item.name }}</span>

        <img
          src="../../../imgs/点赞.png"
          class="newtrends-content-toxiang-img"
        />
        <span style="float: right">{{ item.likes }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
